import { ref,createVNode } from 'vue';
import { FormInstance,Modal,message } from 'ant-design-vue';
import { ExclamationCircleOutlined, CloseOutlined, SearchOutlined, DeleteOutlined, PlusOutlined, ReloadOutlined, DownOutlined } from '@ant-design/icons-vue';

/* Props */
export const drawerPopup = ref<boolean>(true);
// 缩略图索引
export const scalePicIndex = ref<number>(0)
export const fileList = ref([]);
export const formRef = ref<FormInstance>()
export const materialNamess :any = [];
// 增加同类素材
export const addSimMatPopup = ref<boolean>(false)
// 表格
interface UserTableType {
  rn: string;
  materialName: string; //素材名称
  certificateName: string;
  materialSource: string;
  labelName: string;
  materialMaturityDate: string;
  isShare: string;
  material_ids: string;
}
// 表单
interface AddFormType {
  materialName: string;
  materialFilePath: string;
  certificateNames: any;
  materialSource: string;
  labelIds: any;
  materialMaturityDate: string;
  isShare: string;
  materialId: string;
  fileList:any,
  updategMaterialId:string,
}




/* Event */
export const showDrawerPopup = () => {
  drawerPopup.value = true
  console.log(123)
}

export const disabledDrawer = () =>{
  drawerPopup.value = false
}

export const afterOpenChange = (bool: boolean) => {
  console.log('open', bool);
};

export const carouselOnChange = (current: number) => {
  console.log(current);
};

export const showAddSimMatPopup = () =>{
  addSimMatPopup.value = true
}
export const disabledAddSimMatPopup = () =>{
  addSimMatPopup.value = false;
}

   //素材上传
   export const addbtn = () =>{
    addFormState.materialFilePath = ''; //上传素材
    addFormState.certificateNames = []; //上传证书
    addFormState.fileList = []; 
    fileList2 = []; 
    addFormState.materialName = '';
    addFormState.materialSource = ''; //素材来源
    addFormState.labelIds = [];
    addFormState.materialMaturityDate = ''; //素材到期日
    addFormState.isShare = ''; //是否共享
    addFormState.materialId = ''; 
    addFormState.updategMaterialId = ''; 
    showModal = true;
    // this.$nextTick(() => {
    //     //   this.addFormState.resetFields()
    // });
  }
   export const beforeUpload = (file: any) => {
		 
    const isJpgOrPng = file.type === 'image/jpg' || file.type === 'image/png' || file.type === 'image/jpeg' || file.type === 'image/gif' || file.type === 'video/mp4';
    let isCheck = true
    if (!isJpgOrPng) {
        isCheck = false
        message.error('请上传jpg,jpeg,png,gif格式');
    }

    // const isLt10M = file.size / 1024 / 1024 <= 10;
    // const isLt200M = file.size / 1024 / 1024 <= 200;

    if(file.type === 'video/mp4'){
        const isLt200M = file.size / 1024 / 1024 <= 200;
        if (!isLt200M) {
            message.error('上传失败，格式/大小不满足要求，请核实!');
        }
        return isCheck && isLt200M;
    }else{
        const isLt10M = file.size / 1024 / 1024 <= 10;
        if (!isLt10M) {
            message.error('上传失败，格式/大小不满足要求，请核实!');
        }
        return isCheck && isLt10M;
    }
    // return isCheck && isLt10M && isLt200M;
};


//证书上传
export const beforeUpload2 = (file: any) => {
 
    const isJpgOrPng = file.type === 'application/pdf';
    let isCheck = true
    if (!isJpgOrPng) {
        isCheck = false
        message.error('请上传pdf格式');
    }
    const isLt10M = file.size / 1024 / 1024 < 10;
    if (!isLt10M) {
        message.error('上传失败，格式/大小不满足要求，请核实!');
    }
    return isCheck && isLt10M;
};

export const handleModalOk = () =>{
  addForm.validate().then(() => {
      Modal.confirm({
          title: '提示',
          icon: createVNode(ExclamationCircleOutlined),
          content: '确认提交素材吗？',
          okText: '确定',
          cancelText: '取消',
          onOk: () => {
              addRealmNameId();
          },
          onCancel() {
          },
      });
  });
}
export const  addRealmNameId = () =>{ 
  // 发请求 调用新增接口
  // this.userTableLoading = true;
  
          let certificateNamesValue = materialNamess;
           // 如果证书名称数组只包含一个空字符串，则清空数组
              if (certificateNamesValue.length === 1 && certificateNamesValue[0] === "") {
                  certificateNamesValue = [];
              }

              const params = {
                  materialId: addFormState.materialId,
                  updategMaterialId: addFormState.updategMaterialId,
                  materialName: addFormState.materialName, // 上传素材的名称
                  materialSource: addFormState.materialSource, //素材来源
                  materialFilePath: materialNames, //上传素材
                  certificateNames: certificateNamesValue, //上传证书
                  labelIds: regionList,
                  materialMaturityDate:addFormState.materialMaturityDate, //素材到期日
                  isShare: addFormState.isShare || '0', //是否共享
                  status: '0'
              };

   
   
  
  systemManagementApi.uploadMaterial(params, {}).then((res) => {
      this.showModal = false;
      message.success('添加成功');
      this.userTablePagination.current = 1;
      this.userTablePagination.pageSize = 10;
      this.getList(); 
      
  });
}


//新增的表单数据
public addFormState: AddFormType = {
  fileList:[],
  materialFilePath: '',
  certificateNames: [],
  materialName: '',
  materialSource: '',
  labelIds: [],
  materialMaturityDate: '',
  isShare: '',
  materialId: '',
  updategMaterialId:''
};

// 上传素材
// export const handleChange = (info: UploadChangeParam) => {
//   if (info.file.status !== 'uploading') {
//     console.log(info.file, info.fileList);
//   }
//   if (info.file.status === 'done') {
//     message.success(`${info.file.name} file uploaded successfully`);
//   } else if (info.file.status === 'error') {
//     message.error(`${info.file.name} file upload failed.`);
//   }
// };
// // 取消操作
// export const cleanForm = () => {
  
//   // formRef.value.resetFields();
//   formRef.value?.resetFields();
//   // addSimMatPopup.value = false;
// };


